import React, { useState } from 'react';
import style from './style.module.scss';
import { Link } from 'react-router-dom';

const Item = ({ post }) => {
    return(
        <div className={style.groupItem}>
            <div className={style.groupTime}>
                {
                    post.time.split(' ')[1].substr(0, 5)
                }
            </div>
            <div className={style.groupContent}>
                <Link to={`play/${post.id}`}>
                    <img src={post.img} alt="pic"/>
                </Link>
            </div>
            <div className={style.groupBody}>
                <Link to={`play/${post.id}`}>
                    <p className={style.name}>{post.title}</p>
                </Link>
                <p className={style.desc}>第{post.desc}话</p>
            </div>
        </div>
    )
}

const Lists = ({ posts, date }) => {
    const d2d = {
        0: '周日',
        1: '周一',
        2: '周二',
        3: '周三',
        4: '周四',
        5: '周五',
        6: '周六',
    }
    return (
        <div className={style.lists}>
            <h5 className={new Date().getDay() == date ? style.currDate : ''}>{d2d[date]}</h5>
            {
                posts.map(post => (
                    <Item key={post.id} post={post}></Item>
                ))
            }
        </div>
    )
}

const Tabs = ({ newPosts }) => {
    const [distance, setDistance] = useState({ dir: -1, index: 0});
    const dis = '1130';
    const handleNext = (dir) => {
        if(dir === 'prev') {
            setDistance(prevstate => ({
                dir: -1,
                index: distance.index === 0 ? 0 : distance.index - 1,
            }))
        }
        if(dir === 'next') {
            setDistance(prevstate => ({
                dir: -1,
                index: distance.index === 2 ? 2 : distance.index + 1,
            }))
        }
    }
    return(
        <div className={style.tabWarp}>
            <div className={style.title}>
                <h4>新番时间表</h4>
                <button 
                    className={style.prev}
                    onClick={() => { handleNext('prev') }}
                ></button>
                <button 
                    className={style.next}
                    onClick={() => { handleNext('next') }}
                ></button>
            </div>
            <div
                className={style.tabContainer}
                style={{transform: `translateX(${dis * distance.dir * distance.index}px)`}}
            >
                {
                    Object.keys(newPosts).map(key => (
                        <Lists key={key} date={key} posts={newPosts[key]}></Lists>
                    ))
                }
            </div>
        </div>
    )
}

export default Tabs;